<template>
  <div>
    <el-pagination
      layout="total,sizes,prev, pager, next, jumper"
      :total="props.listCount"
      :current-page="props.page"
      :page-size="props.limit"
      :disabled="loading"
      background
      :page-sizes="[2, 3, 4]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 10
  },
  listCount: {
    type: Number,
    default: 0
  },
  loadList: {
    type: Function,
    default: () => {}
  },
  loading: {
    type: Boolean,
    default: false
  }
})
// interface PropsType{
//   page: number
//   limit: number
//   listCount: number
//   loadList: () => void
// }
// const props = withDefaults(defineProps<PropsType>(), {
//   page: 1,
//   limit: 10,
//   listCount: 0,
//   loadList: () => {}
// })
interface EmitsType {
  (e: 'update:page', page: number): void
  (e: 'update:limit', page: number): void
}

// const emit = defineEmits(['update:page', 'update:limit', 'update:listCount'])
const emit = defineEmits<EmitsType>()
const handleCurrentChange = (page: number) => {
  emit('update:page', page)
  props.loadList()
}
const handleSizeChange = (size: number) => {
  emit('update:page', 1)
  emit('update:limit', size)
  props.loadList()
}
</script>

<style scoped></style>
